<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 职位管理 </el-breadcrumb-item>
                <el-breadcrumb-item>职位详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-row>
                <div class="form-box">
                    <el-form ref="form" :model="form" label-width="80px">
                        <!-- 职位相关信息 -->
                        <el-divider content-position="left">职位详情</el-divider>

                        <el-form-item label="职位名称">
                            <el-input v-model="form.name" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="级别" prop="level">
                            <el-radio-group v-model="form.level" disabled>
                                <el-radio-button :key="index" v-for="(item, index) in levels" :label="item.code">{{
                                    item.name
                                }}</el-radio-button>
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item label="上级名称" :hidden="needLeader">
                            <el-input v-model="form.leaderId" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="状态">
                            <el-switch v-model="form.status" :active-value="1" :inactive-value="0" disabled></el-switch>
                        </el-form-item>

                        <el-form-item label="职位描述">
                            <el-input type="textarea" rows="5" v-model="form.description" disabled></el-input>
                        </el-form-item>

                        <div :hidden="needDept">
                            <!-- 相关部门信息 -->
                            <el-divider content-position="left">相关部门</el-divider>

                            <el-form-item label="部门名称">
                                <el-input :value="form.did == '00' ? '暂无部门' : dept.name" disabled></el-input>
                            </el-form-item>

                            <el-form-item label="打卡时间">
                                <el-col :span="11">
                                    <el-time-picker
                                        placeholder="上班时间"
                                        v-model="dept.startTime"
                                        value-format="HH:mm:ss"
                                        style="width: 100%"
                                        :clearable="false"
                                        disabled
                                    ></el-time-picker>
                                </el-col>
                                <el-col class="line" :span="2">-</el-col>
                                <el-col :span="11">
                                    <el-time-picker
                                        placeholder="下班时间"
                                        v-model="dept.endTime"
                                         value-format="HH:mm:ss"
                                        style="width: 100%"
                                        :clearable="false"
                                        disabled
                                    ></el-time-picker>
                                </el-col>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>

                <!-- 该职位下的所有员工 -->
                <el-divider content-position="left">下属职位</el-divider>
                <el-table :data="tableData" height="250" border style="width: 60%">
                    <el-table-column type="index" label="ID" width="55" align="center"> </el-table-column>
                    <el-table-column prop="name" label="名称" width="180"> </el-table-column>
                    <el-table-column prop="did" label="部门" width="180" :formatter="formatDept"> </el-table-column>
                    <el-table-column prop="status" label="状态">
                        <template slot-scope="scope">
                            <el-switch
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                :value="scope.row.status"
                                :active-value="'01'"
                            ></el-switch>
                        </template>
                    </el-table-column>
                </el-table>

               
                <el-button @click="goback" icon="el-icon-arrow-left" style="margin-top:20px">返回</el-button>
              
            </el-row>
        </div>
    </div>
</template>

<script>
export default {
    name: 'baseform',
    inject: ['reload'],
    data() {
        return {
            id: this.$route.query.id,
            needDept: false,
            needLeader: false,
            form: {
                name: '',
                leaderId: '',
                did: '',
                level: '',
                status: 1,
                description: ''
            },
            tableData: [],
            levels: [
                { name: '董事长', code: '01' },
                { name: '副董事长', code: '02' },
                { name: '经理', code: '03' },
                { name: '组长', code: '04' },
                { name: '员工', code: '05' }
            ],
            leader: {},
            dept: {},
            employees: [],
            depts: []
        };
    },
    created: function () {
        this.initPosition();
        this.initStaff();
        this.getDepts();
    },
    methods: {
        async getDepts() {
            var d = await this.$http.get('/depts');
            if (d.code == 200) {
                this.depts = d.data;
            } else {
                this.depts = ['--获取信息失败--'];
            }
        },
        judgeNeedDpet() {
            if (this.form.level == '01' || this.form.level == '02') {
                this.needDept = true;
            }
        },
        judgeNeedLeader() {
            if (this.form.level == '01') {
                this.needLeader = true;
            }
        },
        formatDept(row, column) {
            var did = row[column.property];
            if (did == '00') {
                return '暂无部门';
            }
            if (did == '01') {
                return '**';
            }
            for (var i = 0; this.depts.length > i; i++) {
                if (this.depts[i].id == did) {
                    return this.depts[i].name;
                }
            }
        },

        async initStaff() {
            var condition = {
                leaderId: this.id
            };
            var a = await this.$http.post('/positionMap', condition);
            if (a.code == 200) {
                this.tableData = a.data;
            }
        },

        async initPosition() {
            var a = await this.$http.get('/position/' + this.id);
            if (a.code == 200) {
                this.form = a.data;
                this.getLeader();
                this.getDept();
                this.judgeNeedDpet();
                this.judgeNeedLeader();
                this.$message.success(a.message);
            } else {
                this.$message.error(a.message);
            }
        },

        async getLeader() {
            var d = await this.$http.get('/position/' + this.form.leaderId);
            this.leader = d.data;
            this.form.leaderId = this.leader.name;
        },

        goback(){
            this.$router.go(-1);
        },

        async getDept() {
            var d = await this.$http.get('/dept/' + this.form.did);
            this.dept = d.data;
            this.form.did = this.dept.name;
        },

        async getEmployee() {}
    }
};
</script>
